/* 覆盖浏览器默认样式 */
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}

/* 常用类 */
/* 在主区域内居中 */
.container {
  margin: 0 auto; /* 块元素水平居中小技巧*/
  width: 1226px;
  display: flex;
  justify-content: space-between;
}
.flex {
  display: flex;
}
.align-items-center {
  align-items: center;
}

/* header  开始*/
#header {
  height: 40px;
  background: #333;
  font-size: 12px;
  color: #b0b0b0;
  line-height: 40px;
}

#header li:not(.no-gap, :last-child):after {
  content: "|";
  margin: 0 6px;
  color: #424242;
}
#header li:hover {
  color: #fff;
}
/* #header li:last-child::after {
  display: none;
} */
/* #header li.no-gap::after {
  display: none;
} */

#header .cart {
  width: 120px;
  height: 40px;
  background: #424242;
  text-align: center;
  margin-left: 30px;
}
#header .cart:hover {
  color: #ff6700;
  background: #fff;
}
#header .icon-cart {
  margin-right: 10px;
}
/* header  结束*/

/* nav  开始*/
#nav {
  height: 100px;
}
#nav .logo {
  width: 56px;
}
#nav li {
  margin-right: 20px;
}
#nav li:hover {
  color: #ff6700;
}

/* search */
#nav .search{
  width: 296px;
  height: 50px;
  display: flex;
}
#nav .search:hover input{
  border-color: #b0b0b0;
}
#nav .search:hover button{
  border-color: #b0b0b0;
}
#nav .search input {
  border: 1px solid #e0e0e0;
  flex: 1;
}
#nav .search button {
  width: 50px;
  height: 50px;
  color: #616161;
  border: 1px solid #e0e0e0;
  border-left: none;
}
#nav .search button:hover{
  background: #ff6700; 
  color: #fff; 
}
/* nav  结束*/

